<template>
	<div>
		<div class="topTitle">内容关联设置</div>
		<div class="margin-bottom20 row-me flex-end margin-right100">
			<el-button type="primary" @click="handleSave">保存设置
			</el-button>
		</div>
		<div class="container row-me">
			<div class="flex1 column-me row-center">
				<div class="height50 margin-right90"><span>引导页菜单设置</span>
					<el-button type="primary" class="margin-left10 margin-right10" @click="addStudy">添加
					</el-button>
				</div>
				<div class="width100Per row-me center-all">
					<div class="width100Per tree-border">
						<el-tree :data="StudyGuideData" :props="defaultProps" @node-click="handleNodeClick"
							@node-contextmenu="clickRight"></el-tree>
					</div>
					<i class="el-icon-d-arrow-right arrowRight"></i>
				</div>
			</div>
			<div class="flex1 column-me row-center">
				<div class="height50 margin-right90">显示科目</div>
				<div class="width100Per row-me center-all">
					<div class="width100Per tree-border padding20">
						<el-checkbox-group v-model="checkList" class="column-me" @change="onChange">
							<el-checkbox class="height50 font-size16" v-for="(item,index) in miniAppData" :key="index"
								:label="item.id">{{item.name}}{{item.description?'('+item.description+')':''}}
							</el-checkbox>
						</el-checkbox-group>
					</div>
					<!-- <i class="el-icon-d-arrow-right arrowRight"></i> -->
				</div>
			</div>
			<div class="flex1 column-me row-center" v-if="false">
				<div class="height50 margin-right90">用户可选科目</div>
				<div class="width100Per row-me center-all">
					<div class="width100Per tree-border padding20">
						<el-checkbox-group v-model="checkList2" class="column-me">
							<el-checkbox class="height50 font-size16" v-for="(item,index) in miniAppData" :key="index"
								:label="item.id" :disabled="item.disabled">{{item.name}}
							</el-checkbox>
						</el-checkbox-group>
					</div>
					<i class="el-icon-d-arrow-right arrowRight" style="color: transparent;"></i>
				</div>
			</div>
		</div>
		<!--鼠标右键点击出现页面-->
		<div v-show="menuVisible">
			<el-menu id="rightClickMenu" class="el-menu-vertical" @select="handleRightSelect" active-text-color="#fff"
				text-color="#fff">
				<el-menu-item index="1" class="menuItem">
					<span slot="title">修改菜单</span>
				</el-menu-item>
				<el-menu-item index="2" class="menuItem">
					<span slot="title">删除菜单</span>
				</el-menu-item>
				<el-menu-item index="3" class="menuItem">
					<span slot="title">添加子菜单</span>
				</el-menu-item>
				<el-menu-item index="4" class="menuItem">
					<span slot="title">上移菜单</span>
				</el-menu-item>
				<el-menu-item index="5" class="menuItem">
					<span slot="title">下移菜单</span>
				</el-menu-item>
			</el-menu>
		</div>
		<!-- 添加菜单 -->
		<el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
			<el-form :model="form" label-width="80px">
				<el-form-item label="菜单名称">
					<el-input v-model="form.name" placeholder="请输入选择菜单名称"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitTo">提 交</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				menuVisible: false,
				form: {
					name: ""
				},
				title: "",
				rightClickData: {},
				StudyGuideData: [],
				checkList: [],
				checkList2: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				miniAppData: [],
				guideId: '',
				isEdit: false,
				checkArr: []
			}
		},
		mounted() {
			this.getStudyGuide()
			this.getAll()
		},
		methods: {
			onChange(val) {
				this.checkList2 = []
				this.checkArr = []
				for (let item of this.miniAppData) {
					this.$set(item, 'disabled', false)
				}
				for (let id of val) {
					for (let item of this.miniAppData) {
						if (id == item.id) {
							this.$set(item, 'disabled', true)
							this.checkList2.push(id)
							this.checkArr.push(id)
						}
					}
				}
			},
			async submitTo() {
				if (this.$.isEmpty(this.form.name)) {
					this.$message.warning('请输入菜单名称!')
					return
				}

				if (this.$.isEmpty(this.rightClickData.parentId)) {
					if (this.rightClickData.parentId === 0) {
						this.form.level = Number(this.rightClickData.level + 1) || 1
					} else {
						this.form.level = this.rightClickData.level || 1
					}
				} else {
					if (this.isEdit) {
						this.form.level = this.rightClickData.level || 1
					} else {
						this.form.level = Number(this.rightClickData.level + 1) || 1
					}
				}
				if (JSON.stringify(this.rightClickData) == '{}') {
					this.form.parentId = 0
				} else {
					this.form.parentId = this.rightClickData.id
				}
				if (this.isEdit) {
					if (this.form.level == 1) {
						this.form.parentId = 0
					} else {
						this.form.parentId = this.rightClickData.parentId
					}
					this.form.id = this.rightClickData.id
				}
				const res = await this.$post('/admin/studyGuide/addStudyGuide', this.form)
				if (res.code == 1000) {
					this.$message.success('添加成功')
					this.getStudyGuide()
					this.dialogVisible = false
				}
			},
			addStudy() {
				this.dialogVisible = true
				this.rightClickData = {}
				this.title = '添加菜单'
				this.form = {}
				this.isEdit = false
			},
			async handleSave() {
				let arr = []
				for (let item of this.checkList2) {
					if (this.checkList.indexOf(item) == -1) {
						arr.push({
							appid: item,
							isDefault: false
						})
					}
				}
				for (let item of this.checkList) {
					arr.push({
						appid: item,
						isDefault: true
					})
				}
				const res = await this.$post(`/admin/studyGuide/bindSubject/${this.guideId}`, arr)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getStudyGuide()
					this.checkList = []
					this.checkList2 = []
				}
			},
			async getAll() {
				const res = await this.$get('/admin/minis/getAll')
				if (res.code == 1000) {
					this.miniAppData = res.data
				}
			},
			async getStudyGuide() {
				const res = await this.$get('/admin/studyGuide/list')
				if (res.code == 1000) {
					this.StudyGuideData = res.data
				}
			},
			clickRight(event, object, value, element) {
				this.rightClickData = object;
				this.menuVisible = true;
				document.addEventListener('click', e => {
					this.menuVisible = false;
				});
				let menu = document.querySelector('#rightClickMenu');
				/* 菜单定位基于鼠标点击位置 */
				menu.style.left = event.clientX + 20 + 'px';
				menu.style.top = event.clientY - 30 + 'px';
				menu.style.position = 'absolute';
				menu.style.width = 130 + 'px';
			},
			async handleRightSelect(key) {
				if (key == 1) {

					this.title = "修改菜单"
					this.dialogVisible = true
					this.isEdit = true
					this.form.name = this.rightClickData.name
				} else if (key == 2) {
					const res = await this.$postForm('/admin/studyGuide/delete', {
						id: this.rightClickData.id
					})
					this.$message.success('删除成功')
					this.getStudyGuide()
				} else if (key == 3) {
					if (this.rightClickData.level == 3) {return}
					this.title = "添加子菜单"
					this.dialogVisible = true
					this.form = {}
					this.isEdit = false
				} else if (key == 4) {
					const res = await this.$postForm('/admin/studyGuide/moveUp', {
						id: this.rightClickData.id
					})
					this.$message.success('成功上移')
					this.getStudyGuide()
				} else if (key == 5) {
					const res = await this.$postForm('/admin/studyGuide/moveDown', {
						id: this.rightClickData.id
					})
					this.$message.success('成功下移')
					this.getStudyGuide()
				}
			},
			async handleNodeClick(row) {
				this.checkList2 = []
				this.guideId = row.id
				const res = await this.$get(`/admin/studyGuide/getBindSubject/${row.id}`)
				this.checkList = Array.from(res.data, ({
					appid
				}) => appid)
				this.checkList = [...new Set(this.checkList)]
				for (let item of this.miniAppData) {
					this.$set(item, 'disabled', false)
					for (let id of this.checkList) {
						if (item.id == id) {
							this.$set(item, 'disabled', true)
							this.checkList2.push(id)
						}
					}
				}
			},
			handleCheckChange(data, checked, indeterminate) {
				console.log(data, checked, indeterminate);
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .el-tree-node__label {
		font-size: 16px !important;
	}

	/deep/ .el-tree-node__content {
		height: 50px !important;
	}

	/deep/ .el-tree-node__children {
		background-color: #f9f9f9;
	}

	/deep/ .el-checkbox__label {
		font-size: 16px !important;
	}

	.tree-border {
		box-shadow: 0px 1px 5px #888888;
	}

	.arrowRight {
		font-size: 50px;
		color: #707070;
		font-weight: 700;
		margin-left: 20px;
		margin-right: 20px;
	}

	.el-menu-vertical {
		border: 3px solid rgb(84, 92, 100);
		border-radius: 10px;
		z-index: 100;
		background-color: #777;
	}

	.el-menu-vertical i {
		color: #777777;
	}

	.menuItem {
		height: 30px;
		line-height: 30px;
		background-color: #545c64;
		font-size: 14px;
	}

	.menuItem:hover {
		background-color: #409eff;
	}
</style>